<!DOCTYPE HTML>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="svg.css"></link>
</head>
<body>
  <h1>SVG Demo</h1>
  <svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
    </rect>

    <rect x="50" y="50" height="110" width="110"
          style="stroke:#ff0000; fill: #ccccff"
          transform="translate(30) rotate(45 50 50)"
            >
    </rect>
    <text x="70" y="100"
          transform="translate(30) rotate(45 50 50)" >Hello World</text>

    <circle  class="myGreen" cx="140" cy="40"  r="24"/>
    <circle  class="myRed"   cx="140" cy="100" r="24"/>

    <g>
      <line x1="310" y1="10" x2="385" y2="10"
          style="stroke: #006600;"/>

      <rect x="310" y="20" height="50" width="75"
          style="stroke: #006600; fill: #006600"/>

      <text x="310" y="90" style="stroke: #660000; fill: #660000">
        Text grouped with shapes</text>
    </g>


    <g transform="rotate(300 300 50)">
      <line x1="310" y1="310" x2="385" y2="310"
          style="stroke: #006600;"/>

      <rect x="310" y="320" height="50" width="75"
          style="stroke: #006600; fill: #006600"/>

      <text x="310" y="390" style="stroke: #660000; fill: #660000">
        Text grouped with shapes</text>
    </g>
</svg>
</body>
</html>
